<template>
	<view
		class="nav-bar"
		:class="{ fixed }"
		:style="{ background: bgColor, color: txtColor, zIndex }"
	>
		<view class="nav-bar-stauts" :style="{ height: `${uniStatusBarHeight}px` }" />

		<view class="nav-bar-content" :style="{ height: `${uniHeaderBarHeight}px`, padding:`0 ${paddingWidth}`}" >
			<view
				class="left"
				:style="leftStyle"
				@click="clickLeft"
				v-if="isShowLeft"
			>
				<slot name="left" >
					<template v-if="!$slots.left">
					      <uni-icons type="home" :color="leftBackColor || txtColor" size="20" v-if="goHome"/>
					      <uni-icons type="back" :color="leftBackColor || txtColor" size="20" v-else/>
					      <view class="left-txt" v-if="isShowLeftTxt">{{ isShowLeftTxt || '返回' }}</view>
					</template>
				</slot>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="mid flex items-center justify-center">
			<!-- #endif -->

			<!-- #ifdef APP || H5 -->
			<view class="mid flex items-center justify-center">
			<!-- #endif -->
				<slot><text class="u-line-1">{{ title }}</text></slot>
				<template v-if="search">
					<view class="round-full px-30 flex items-center bgc-gray-5 flex-1 ml-30 h-60" style="color: #9E9E9E">
						<uni-icons type="search" color="#9E9E9E" class="mr-10" />
						<!-- <uv-notice-bar :text="notices" direction="column" class="flex-1" bgColor="transparent" color="rgba(144,147,153,.8)" fontSize="12" @click="searchFun" /> -->
					</view>
				</template>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="right" :style="'margin-right: '+jiaolang+'px;'" >
			    <slot name="right" v-if="isShowRight">
					<text class="iconfont icon-Black" :style="{ color: txtColor }" @click="clickLeft" />
					<view class="right-txt">编辑</view>
				</slot>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="right" v-if="isShowRight">
			    <slot name="right" >
					<text class="iconfont icon-Black" :style="{ color: txtColor }" @click="clickLeft" />
					<view class="right-txt">编辑</view>
				</slot>
			</view>
			<view class="right" v-else style="width: 75px" />
			<!-- #endif -->
		</view>

		<view
			style="height: 100%;width: 100%;position: absolute;top: 0;z-index: -1"
			:style="{ background: bgimg, filter: `blur(${filter})`}"
			v-if="bgimg"
		/>
	</view>
</template>


<script setup>

import { reactive, toRefs, onMounted , computed, nextTick, getCurrentInstance, ref } from 'vue'

const props = defineProps({
	title:{ type: String, default:'' },
	bgimg: { type: String, default:'' },
	filter: { type: String, default:'' },
	zIndex: { type: String, default:'1' },
	autoBack: { type: Boolean, default: true },
	search: { type: [Object, String] },
	getNavHeight: { type: Function, default: null },

	leftStyle: { type: String, default: '' },  // 左侧自定义样式
    isShowLeft:{ type: Boolean, default:true },  // 是否显示左边区域
	isShowLeftTxt:{ type: [Boolean, String], default: false },  // 是否显示左边文字
	isShowRight:{ type: Boolean, default: false },  // 是否显示右边区域
	padding:{ type: Number, default:24 },  // 导航距离两边宽度
	bgColor:{ type: String, default:'#ffffff' },  // 导航背景颜色
	txtColor:{ type: String, default:'#1a1a1a' },  // 文字颜色
	leftBackColor: { type: String, default:'' },
	statusBarHeight:{ type: Number, default:0 },  // 状态栏高度，H5中为0 小程序中为44
	headerBarHeight:{ type: Number, default:45 },  // 导航栏高度
	fixed: { type: Boolean, default:false },  // 是否塌陷

	notices: { type: Array, default: () => [] },  // 热门关键字

	goHome: { type: Boolean, default: false }  // 是否显示返回首页
})

const { ctx, proxy } = getCurrentInstance()
const emits = defineEmits(['click-left', 'update:navHeight'])
const state = reactive({ uniStatusBarHeight: 0, uniHeaderBarHeight: 45 })

const paddingWidth = computed(() => `${props.padding}rpx`)
const searchFun = () => uni.navigateTo({ url: `/pages/common/search?type=${props.search}` })

const clickLeft = () => {
	if (props.goHome){
		uni.switchTab({ url: '/pages/tabbar/home/index' })
		return
	}
	!props.autoBack && emits('click-left')
	props.autoBack && uni.navigateBack()
}

const jiaolang = ref(0)

// 初始化
onMounted(() => {
	uni.getSystemInfo({
		success(e) {
			let statusBar
			let headerBar

			if (e.platform == 'ios' || e.platform == 'devtools') {
				statusBar = e.statusBarHeight
				headerBar = 45
			} else {
				statusBar = e.statusBarHeight
				headerBar = 50
			}

			// 如果传参了会优先用传参的值
			if (props.statusBarHeight) state.uniStatusBarHeight = props.statusBarHeight
			else state.uniStatusBarHeight = statusBar

			if(props.headerBarHeight) state.uniHeaderBarHeight = props.headerBarHeight
			else state.uniHeaderBarHeight = headerBar
		}
	})

	setTimeout(() => {
		if(props.getNavHeight){
			// #ifdef APP
			const query = uni.createSelectorQuery().in(proxy)
			query.select('.nav-bar').boundingClientRect(layout => {
				props.getNavHeight(layout.height)
			}).exec()
			// #endif
			// #ifdef MP-WEIXIN
			const query = uni.createSelectorQuery().in(ctx)
			query.select('.nav-bar').boundingClientRect(layout => {
				props.getNavHeight(layout.height)
			}).exec()
			// #endif
		}
	}, 500)

	// #ifdef MP-WEIXIN
	let res = uni.getMenuButtonBoundingClientRect()
	jiaolang.value = res.width
	// #endif
})



const { uniStatusBarHeight, uniHeaderBarHeight } = toRefs(state)
</script>

<style lang="scss" scoped>
	.nav-bar{
		width: 100%;
		position: relative;
		overflow: hidden;
		transition: 0.3s;
		&.fixed{
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			z-index: 2;
		}
		.nav-bar-stauts{
			width: 100%;
		}
		.nav-bar-content{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.left{
			    // overflow: hidden;
				flex-shrink: 0;
				width: 160rpx;
				height: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				white-space: nowrap;
				.left-txt{
					margin-left: 16rpx;
					font-size: 28rpx;
					white-space: nowrap;
				}
			}
			.mid{
				font-size: 32rpx;
				flex-grow: 1;
				text-align: center;
				white-space:nowrap;
				overflow:hidden;
				text-overflow:ellipsis;
			}
			.right{
				overflow: hidden;
				flex-shrink: 0;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: center;
				.right-txt{
					margin-left: 6rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
